import { computed, defineComponent, ref } from 'vue';
import Avatar from './Avatar.vue';
import Basic from './Basic.vue';
import Glossy from './Glossy.vue';
import GroupedHorizontally from './GroupedHorizontally.vue';
import GroupedVertically from './GroupedVertically.vue';
import WithBtnToggle from './WithBtnToggle.vue';
import WithDropdown from './WithDropdown.vue';
import WithTabs from './WithTabs.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Avatar</h5>
            <Avatar />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Glossy</h5>
            <Glossy />
          </div>
          <div class='block-'>
            <h5 class='title'>GroupedHorizontally</h5>
            <GroupedHorizontally />
          </div>
          <div class='block-'>
            <h5 class='title'>GroupedVertically</h5>
            <GroupedVertically />
          </div>
          <div class='block-'>
            <h5 class='title'>WithBtnToggle</h5>
            <WithBtnToggle />
          </div>
          <div class='block-'>
            <h5 class='title'>WithDropdown</h5>
            <WithDropdown />
          </div>
          <div class='block-'>
            <h5 class='title'>WithTabs</h5>
            <WithTabs />
          </div>
        </div>
      );
    };
  },
});
